<template>
  <mu-container class="question-list">
    <h2>题库列表</h2>
    <p class="question-list-position">您现在在第 {{ pagination.current_page }} 页</p>

    <mu-data-table
      v-loading="loading"
      :columns="columns"
      :data="list"
      :sort.sync="sort"
      stripe
      border
      @sort-change="handleSortChange">
      <template slot-scope="scope">
        <td>{{ scope.row.has_exam ? '做过' : '' }}</td>
        <td>
          <span>{{ scope.row.question_form_readable }}</span>
          <span v-if="scope.row.graph !== null" class="question-list-red">(有图)</span>
        </td>
        <td>{{ scope.row.question_type_readable }}</td>
        <td>{{ scope.row.ask }}</td>
        <td>
          <span class="question-list-exam-status-left">{{ calcPass(scope.row.exam_status) }}</span>
          <span class="question-list-exam-status-right">{{ calcCorret(scope.row.exam_status) }}</span>
        </td>
        <td>
          <mu-chip :color="calcStatus(scope.row).color">
            <!-- <span>{{ calcStatus(scope.row).readable }}</span> -->
            <span>{{ scope.row.check_status.pass_num }}通过</span>
            <span>&nbsp;</span>
            <span>{{ scope.row.check_status.fail_num }}拒绝</span>
          </mu-chip>
        </td>
        <td>
          <mu-button
            v-loading="scope.row.is_deleting"
            color="primary"
            @click="handleOpen(scope.row)">打开</mu-button>
        </td>
      </template>
    </mu-data-table>

    <mu-flex class="question-list-pagination">
      <mu-pagination
        :total="pagination.total"
        :page-size="pagination.per_page"
        :current.sync="pagination.current_page"
        raised
        @change="fetch()"></mu-pagination>
      <mu-text-field v-model="pagination.to_page" style="margin-left:2em;width:6em"></mu-text-field>
      <mu-button @click="fetch(pagination.to_page)">跳转</mu-button>
    </mu-flex>
  </mu-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { minus } from '@/util'
import { fetchQuestions } from '@/api/questions'
import OptionsShower from '../Questions/OptionsShower'
import QuestionListQueryBuilder from '@/components/QuestionListQueryBuilder'
import { process } from '@/util/questions'

export default {
  name: 'QuestionList',
  components: {
    OptionsShower,
    QuestionListQueryBuilder
  },
  data() {
    return {
      columns: [
        { title: '我做过没', name: 'has_exam', width: 100, align: 'center' },
        { title: '题目形式', name: 'question_form', width: 120, align: 'center', sortable: true },
        { title: '题目分类', name: 'question_type', align: 'center', sortable: true },
        { title: '题面', name: 'ask', align: 'center', sortable: true },
        { title: '正确率', name: 'corret', align: 'center', sortable: true },
        { title: '状态', name: 'status', width: 160, align: 'center', sortable: true },
        { title: '操作', align: 'center', sortable: false }
      ],
      list: [],
      pagination: {
        current_page: 1,
        per_page: 20,
        total: 0
      },
      sort: {
        name: '',
        order: 'asc'
      },
      loading: false,
      remove: {
        row: null,
        dialog: false
      },
      // graph: {
      //   show: false,
      //   src: ''
      // },
      query: {
        all: 1
      }
    }
  },
  computed: {
    ...mapGetters({
      options: 'types/options'
    })
  },
  mounted() {
    this.fetch()
  },
  methods: {
    async fetch(page = this.pagination.current_page) {
      this.pagination.current_page = page
      this.loading = true
      try {
        const data = await fetchQuestions(page, this.query)
        this.list = data.data.map(this.process)
        for (const key in this.pagination) {
          this.pagination[key] = data[key]
        }
      } catch (err) {
        this.$report(err)
      }
      this.loading = false
    },
    handleSortChange({ name, order }) {
      this.list = this.list.sort((a, b) => minus(a[name], b[name]) * (order === 'asc' ? 1 : -1))
    },
    process(item) {
      return {
        ...process(item, this.options),
        is_deleting: false
      }
    },
    handleOpen(row) {
      this.$emit('open', row)
    },
    calcStatus(row) {
      const pass_num = row.check_status.pass_num || 0
      const fail_num = row.check_status.fail_num || 0
      if (pass_num === 0 && fail_num === 0) {
        return {
          color: 'primary',
          readable: '未审核'
        }
      } else if (pass_num > 0 && fail_num > 0) {
        return {
          color: 'error',
          readable: '意见不一致'
        }
      } else if (pass_num > 0) {
        return {
          color: 'success',
          readable: '通过'
        }
      } else if (fail_num > 0) {
        return {
          color: 'warning',
          readable: '拒绝'
        }
      } else {
        return {
          color: 'error',
          readable: '运行错误'
        }
      }
    },
    calcPass(exam_status) {
      const pass_num = exam_status.pass_num
      const fail_num = exam_status.fail_num
      const sum = pass_num + fail_num
      return `${pass_num} / ${sum}`
    },
    calcCorret(exam_status) {
      const pass_num = exam_status.pass_num
      const fail_num = exam_status.fail_num
      const sum = pass_num + fail_num
      if (sum === 0) {
        return '-'
      } else {
        return (parseInt(pass_num / sum * 10000) / 100).toString() + '%'
      }
    }
  }
}
</script>

<style>
.question-list-position,
.question-list-pagination {
  margin: 20px 0;
}
.question-list-show-image {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.4);
}
.question-list-show-image img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.question-list-exam-status-left {
  margin: 0 0.5em;
  display: inline-block;
  min-width: 3em;
  text-align: center;
}
.question-list-exam-status-right {
  margin: 0 0.5em;
  display: inline-block;
}
.question-list-red {
  color: red;
}
</style>
